import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Progress Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Progress Animation Demo')),
        body: const ProgressRoute(),
      ),
    );
  }
}

class ProgressRoute extends StatefulWidget {
  const ProgressRoute({super.key});

  @override
  State<ProgressRoute> createState() => _ProgressRouteState();
}

class _ProgressRouteState extends State<ProgressRoute> 
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    
    // 初始化动画控制器，设置3秒持续时间
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    
    // 创建颜色渐变动画（从灰色到蓝色）
    _colorAnimation = ColorTween(
      begin: Colors.grey,
      end: Colors.blue,
    ).animate(_animationController);
    
    // 启动动画
    _animationController.forward();
    
    // 添加监听器，动画值变化时重建UI
    _animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    // 释放动画控制器资源
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: _colorAnimation, // 使用颜色动画
              value: _animationController.value, // 使用控制器的值(0.0-1.0)
            ),
          ),
          const SizedBox(height: 20),
          // 添加一个按钮可以重新启动动画
          ElevatedButton(
            onPressed: () {
              _animationController.reset();
              _animationController.forward();
            },
            child: const Text('Restart Animation'),
          ),
        ],
      ),
    );
  }
}